<template>

  <el-row>

    <file-view v-if="disabled" :data-file="dataFile"></file-view>
    <el-input v-else v-model="fileInputValue" autocomplete="off" :disabled="disabled || readonly "
              @change="handleInputChange">

      <template slot="prepend" v-if="preview">
        <el-popover
            placement="top-start"
            title=""
            width=""
            trigger="hover"
        >
          <div>
            <file-view v-if="fileViewRefreshed" :data-file="fileObj" height="120" :view-info="true" :default-type="previewType"></file-view>
          </div>

          <el-button slot="reference" size="mini"><i class="el-icon-view"></i></el-button>
        </el-popover>
      </template>
      <template slot="append" v-if="!disabled">
        <template v-if="fileUploadTimely">
          <el-row type="flex">
            <el-col v-if="useScanner">
              <upload-file
                  class="text-primary"
                  :file-disk="fileDisk"
                  v-on:upload-success="handleUploadSuccess"
                  :multiple="false"

                  :select-file-callback="selectFileFromScanner"
                  data-button-text="扫描"
              >

              </upload-file>
            </el-col>

            <el-col v-if="useScanner">
              <div class="mx-3">
                <el-divider direction="vertical"></el-divider>
              </div>
            </el-col>

            <el-col>
              <upload-file
                  :file-disk="fileDisk"
                  v-on:upload-success="handleUploadSuccess"
                  :multiple="false"
                  :url-absolute="urlAbsolute"
                  :accept="accept"
                  :select-file-callback="selectFileCallback" :data-button-text="dataButtonText"></upload-file>
            </el-col>
          </el-row>


        </template>
        <template v-else>
          <el-button @click="openResourceFinder">选择</el-button>
        </template>


      </template>
    </el-input>


    <el-dialog
        title="上传或选择已有文件"
        custom-class="dialog-input-files"
        :visible.sync="dialogFinderVisible"
        :close-on-click-modal="false"
        append-to-body
        width="80%"
    >
      <upload-files
          :file-disk="fileDisk"
          :url-absolute="urlAbsolute"
          :accept="accept"
          v-on:chose="handleUploadSuccess"
          :select-file-callback="selectFileCallback"></upload-files>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>

  </el-row>

</template>
<style>
.dialog-input-files .el-dialog__body {
  padding-top: 0;
  padding-bottom: 0;
}
</style>
<script>

export default {
  components: {},
  props: {
    fileDisk: {
      type: String,
      default: ''
    },
    dataFile: {
      type: [Object, String],
      default: () => {
        return {
          url: '',
          type: '',
        }
      }
    },
    fileUploadTimely: { //实时上传
      type: Boolean,
      default: false
    },
    selectFileCallback: {
      type: Function,
      default: null
    },
    dataButtonText: {
      type: String,
      default: '上传'
    },
    useScanner: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: true
    },
    preview: {
      type: [Boolean,String],
      default: false
    },
    urlAbsolute: {
      type: Boolean,
      default: false
    },
    accept: {
      type: String,
      default: '*.*'
    },
  },
  data() {
    return {
      fileViewRefreshed: false,
      dialogFinderVisible: false,
      fileInputValue: '',
      fileObj: null,
      downUrl: '',
        previewType: '',
    }
  },
  created() {
    let _this = this;
    if(LeUtils.typeIs('string',_this.preview)){
        _this.previewType = _this.preview
    }
    _this.assignFile(_this.dataFile)

    if (typeof (QCefClient) != 'undefined') {
      QCefClient.addEventListener("ScanFileEndEvent", function (event) {
        //alert(LeUtils.valueGet(event,'color',''));
        _this.downUrl = LeUtils.valueGet(event, 'url', '')
      })
    }
  },
  mounted() {
    let _this = this;
  },
  methods: {
    assignFile(data) {
      let _this = this;
      _this.fileViewRefreshed = false;

      _this.fileObj = data
      if (LeUtils.typeIs('object', _this.fileObj)) {
        _this.fileInputValue = LeUtils.valueGet(_this.fileObj, 'url', '')
      } else if (LeUtils.typeIs('string', _this.fileObj)) {
        _this.fileInputValue = _this.fileObj
      }


      _this.$nextTick(function () {

        _this.fileViewRefreshed = true
      })
    },
    selectFileFromScanner() {
      let _this = this;
      _this.downUrl = '';
      //_this.downUrl = 'http://127.0.0.1:53111/temp1597392419.zip';
      if (typeof (QCefClient) == 'undefined') {
        alert('扫描仪调用失败，请使用手动上传')
        return false;
      }

      QCefClient.invokeMethod("scanFile");

      return new Promise(function (resolve, reject) {
        LeUtils.timeCountDown(3600, function () {
          _this.$message.error('加密文件失败');
        }, function () {
          if (_this.downUrl) {
            //console.log('222')
            let fileDownUrl = _this.downUrl;
            _this.downUrl = '';
            fetch(fileDownUrl).then(res => res.blob().then(blob => {
              let nFIle = new File([blob], LeUtils.baseName(fileDownUrl), {lastModified: new Date()});
              resolve(nFIle);
              QCefClient.invokeMethod("closeWait");
            }));
            return true;
          }
        }, 1);

      })
    },
    handleUploadSuccess: function (resource) {
      let _this = this;

      this.assignFile(resource)
      this.dialogFinderVisible = false;
      this.$emit('change', this.fileInputValue)
    },
    handleInputChange: function () {
      this.$emit('change', this.fileInputValue)
    },
    openResourceFinder: function () {
      this.dialogFinderVisible = true;

    }
  }
}
</script>
